<template>
  <div class="container">
    <div class="chart">
      <LakerEcharts ref="wchart" :option="option" width="100%" height="100%" @chartOnclick="chartOnclick" />
    </div>
  </div>
  <hd-chart ref="hdDialogRef" v-if="dialog.hdDialog" @closed="dialog.hdDialog = false"></hd-chart>
</template>
<script>
import LakerEcharts from '@comp/lakerEcharts/index.vue'
import dprevent from '@/api/dprevent'
import HdChart from './HdChart.vue'
export default {
  name: 'DpLeftItem4',
  components: {
    LakerEcharts,
    HdChart
  },
  data() {
    return {
      dialog: {
        hdDialog: false
      },
      option: {
        tooltip: {
          trigger: 'item'
        },
        legend: {
          orient: 'vertical',
          right: 10,
          top: 20,
          show: false
        },
        series: [
          {
            type: 'pie',
            radius: ['40%', '60%'],
            label: {
              formatter: '{b}:{c}项\n{d}%'
            },
            data: [
              { value: 1048, name: '人身' },
              { value: 735, name: '设备' },
              { value: 580, name: '火灾' },
              { value: 484, name: '其他' }
            ]
          }
        ]
      }
    }
  },
  mounted() {
    this.getApiData()
    setInterval(() => {
      this.getApiData()
    }, 5000)
  },
  methods: {
    getApiData() {
      dprevent.dprightapi4().then((res) => {
        if (res.code === 'success') {
          if (res.result) {
            let data = res.result
            this.option.series[0].data = data
          }
        }
      })
    },
    chartOnclick(params) {
      console.log(111)
      this.dialog.hdDialog = true
      this.$nextTick(() => {
        this.$refs.hdDialogRef.open('show').setData(params)
      })
    }
  }
}
</script>
<style lang="scss" scoped>
.container {
  display: flex;
  height: 100%;
  justify-content: right;
  .chart {
    width: 100%;
    height: 100%;
  }
  .title {
    width: 50%;
    display: flex;
    flex-direction: column;
    font-size: 14px;
    align-items: center;
    justify-content: center;
    span {
      font-size: 16px;
      padding: 5px 10px;
    }
  }
}
</style>
